<template>
	<view class="container">
		<u-toast ref="uToast"></u-toast>
		<!-- 顶部导航栏 -->
		<!-- 		<view class="top-nav">

			<view class="top-back" @click="handleBack">
		
				<view class="back-icon">
					<u-icon name="arrow-left" color="#000" size="25"></u-icon>
				</view>
				
				<view class="back-text">
					后台管理
				</view>
			</view>
		</view> -->
		<!-- 标题 -->
		<!-- <view class="system-title">后台管理系统</view> -->
		<!-- 登录盒子 -->
		<view class="login-box">
			<view class="content-box">
				<view class="login-content">
					<!-- 标题 -->
					<view class="login-title">管理员登录</view>
					<!-- 账号 -->
					<u--form :rules="rules" :model="loginForm" ref="logForm" labelWidth="0">
						<u-form-item prop="account">
							<u--input placeholder="账号" prefixIcon="account" v-model="loginForm.account"></u--input>

						</u-form-item>
						<!-- 密码 -->
						<view class="pasd-item">
							<u-form-item prop="password">
								<u-input placeholder="密码" type="password" prefixIcon="lock" v-if="!showLPsd"
									v-model="loginForm.password">

									<template slot="suffix">
										<u-icon name="eye" size="25" @click.native="handelPsdShow"
											v-if="showLPsd"></u-icon>
										<u-icon name="eye-off" size="25" v-if="!showLPsd"
											@click="handelPsdShow"></u-icon>
									</template>

								</u-input>
								<u-input placeholder="密码" type="text" prefixIcon="lock" v-if="showLPsd"
									v-model="loginForm.password">

									<template slot="suffix">
										<u-icon name="eye" size="25" @click.native="handelPsdShow"
											v-if="showLPsd"></u-icon>
										<u-icon name="eye-off" size="25" v-if="!showLPsd"
											@click="handelPsdShow"></u-icon>
									</template>

								</u-input>

							</u-form-item>

						</view>

					</u--form>
					<!-- 					<view class="form-input">
						<u--input placeholder="账号"  prefixIcon="account" 
							v-model="loginForm.account"></u--input>
					</view>
					<view class="form-input">
						<u--input placeholder="密码" :password="true"  prefixIcon="lock"
							v-model="loginForm.password"></u--input>
					</view> -->
					<view class="login-btn">
						<u-button type="primary" text="立即登录" @click="handleLogin"></u-button>
					</view>
					<!-- 前台预约系统 -->
					<view class="jump_front">
						<text @click="handleBackFront">返回前台</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Login
	} from '../../api/user.js'
	import {
		setToken
	} from '../../utils/auth.js'
	export default {
		data() {
			return {
				// 是否展示密码
				showLPsd: false,
				// 登录表单
				loginForm: {
					account: "",
					password: "",
				},
				// 表单验证规则
				rules: {
					account: [{
						type: 'string',
						required: true,
						message: '请填写账号',
						trigger: ['blur']
					}],
					password: [{
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur']
					}],
				}
			};
		},
		onLoad() {
			// 隐藏首页返回按钮
			uni.hideHomeButton()
		},
		onShow() {
			// console.log("我被调用了");
			// uni.hideHomeButton()
			// 
		},
		onReady() {
			// uni.hideHomeButton()
			this.$refs.logForm.setRules(this.rules);
		},
		methods: {
			// 跳转到前台
			// 
			handleBackFront() {
				uni.reLaunch({
					url: "/pages/front-login/front-login"
				})
			},
			// 处理密码的显示隐藏
			handelPsdShow() {
				this.showLPsd = !this.showLPsd
			},
			// 登录
			handleLogin() {
				this.$refs.logForm.validate().then(res => {

					Login(this.loginForm).then(res => {

						let roleId = res.data.accountInfo.roleId
						if (roleId == 0 || roleId == -1) {
							// 登录成功后要将token存入缓存当中
							setToken(res.data.token)
							// 将用户数据存入到缓存当中
							uni.setStorageSync('user', res.data.accountInfo)
							uni.setStorageSync('tuser', res.data.user)
							this.$refs.uToast.show({
								type: 'success',
								message: "登录成功",
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
							})
							uni.reLaunch({
								url: "/pages/admin_center/admin_center"
							})

						} else {
							uni.$u.toast('请使用管理员账号登录')
						}

					}).catch((error) => {

					})
				}).catch(err => {
					uni.$u.toast('请输入所有必填项')
				})
			},
			// 返回前台登录页
			handleBack() {
				uni.reLaunch({
					url: "/pages/front-login/front-login"
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		position: relative;
		width: 100%;
		min-height: 100vh;
		position: relative;
		background-color: #5064eb;
		overflow: hidden;

		.top-nav {
			position: relative;
			width: 100%;
			height: 135upx;
			background-color: #fff;

			.top-back {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				position: absolute;
				left: 10upx;
				bottom: 15upx;
				height: 40upx;
				width: 200upx;
				// background-color: pink;
				font-size: 30upx;
				line-height: 40upx;

				.back-icon {}

				.back-text {
					margin-bottom: 5upx;
				}
			}
		}

		.bg {
			position: relative;
			width: 750upx;
			height: 400upx;
		}

		.system-title {
			width: 100%;
			position: absolute;
			top: 200upx;
			color: #fff;
			font-weight: 700;
			text-align: center;
			font-size: 60upx;
			z-index: 9;
			font-family: "宋体";

		}

		.login-box {
			box-sizing: border-box;
			width: 100%;
			min-height: 500upx;
			padding-left: 50upx;
			padding-right: 50upx;
			margin-top: 190upx;





			.content-box {
				display: inline-block;
				box-sizing: border-box;
				width: 100%;
				// height: 100%;
				background-color: #fff;
				border-radius: 20upx;
				padding-left: 30upx;
				padding-right: 30upx;
				padding-bottom: 30upx;
				box-shadow: 0 0 3px rgba(255, 255, 255, .3);

				.login-title {
					font-size: 45upx;
					text-align: center;
					font-family: "宋体";
					font-weight: 700;
					margin-top: 30upx;
					margin-bottom: 15upx;
				}

				.login-btn {
					margin-top: 20upx;
				}

				.jump_front {
					width: 100%;
					font-size: 26upx;
					color: #5064eb;
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					margin-top: 20upx;
				}
			}
		}
	}
</style>